<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript">
		$(function() {
		
			$("#slideshow > div:gt(0)").hide();
	
			setInterval(function() { 
			  $('#slideshow > div:first')
			    .fadeOut(1000)
			    .next()
			    .fadeIn(1000)
			    .end()
			    .appendTo('#slideshow');
			},  3000);
			
		});
	
        </script>
    </head>
    <body>

        <div id="header">
            <div id="img"style="float:left"> <!-- float faz com a div fique alinhada a esquerda-->
                        <img src="images/logoCORSAP.png" >
            </div>            
        <div id="login" style="float:right"><!-- float faz com a div fique alinhada a direita-->
        <input id="user" type="text">
        <input id="pass" type="password">
        <input id="submit" type="button" value="LOGIN">
        </div>
        </div>
        <br style="clear: both;" /> <!-- reset no float das div's anteriores para não influenciar as restantes abaixo-->
        <ul class="menu">
        
  <li><a href="index.html" class="active"><span>Home</span></a></li>
  <li><a href="Products.html" ><span>Products</span></a></li>
  <li><a href="index.html" ><span>About</span></a></li>
  <li><a href="Help.html" ><span>Help</span></a></li>
</ul>
        <div id="slideshow">
   <div>
     <img src="images/logoCORSAP.png">
     <img src="images/topMenuImages.png">
   </div>
   <div>
     <img src="images/topMenuImages.png">
   </div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
</div>
    </body>
</html>
